import React, { memo, useState, useEffect } from "react";
import { observer } from "mobx-react-lite";
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  ImageBackground,
  Image,
  Animated,
  TouchableOpacity,
  Modal,
  Dimensions,
} from "react-native";
import { p } from "utils/pxToDp";
import {
  ScrollView,
  GestureHandlerRootView,
} from "react-native-gesture-handler";
import { SafeAreaView } from "react-native-safe-area-context";
import { LinearGradient } from "expo-linear-gradient";
import themeStore from "stores/theme";
import commonStyle from "utils/style";
import YText from "components/YText";
import Ionicons from "@expo/vector-icons/Ionicons";
import YButton from "components/YButton";
// import CircularProgress from "components/CircularProgress";

const Together = () => {
  const theme = themeStore.theme;
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ScrollView>
        <LinearGradient
          colors={[
            theme.gradiento1,
            theme.gradiento2,
            theme.gradiento3,
            // theme.gradient4,
            theme.gradientcomment,
          ]}
          style={styles.page}
        >
          {/* backgroundColor 这里可以修改状态栏的背景色  */}
          <SafeAreaView style={styles.pagearea}>
            <YText color={theme.mainText} size={theme.f34} bold>
              共同完成
            </YText>
            <View style={[commonStyle.flexrowcenterbetween]}>
              <View>
                <Text>echarts11</Text>
                {/* <CircularProgress progress={50} radius={200} /> */}
              </View>
              <View style={[commonStyle.flexrow]}>
                <View
                  style={[
                    styles.tcarditem,
                    {
                      backgroundColor: theme.skinbg,
                    },
                  ]}
                >
                  <YText color={theme.mainText} size={theme.f26}>
                    已完成
                  </YText>
                  <View
                    style={[
                      styles.tcardbottom,
                      commonStyle.flexrowcenterbetween,
                    ]}
                  >
                    <YText color={theme.green} size={theme.f28} bold>
                      66
                    </YText>
                    <Ionicons name="document-text-outline" />
                  </View>
                </View>
                <View
                  style={[
                    styles.tcarditem,
                    {
                      backgroundColor: theme.skinbg,
                    },
                  ]}
                >
                  <YText color={theme.mainText} size={theme.f26}>
                    待完成
                  </YText>
                  <View
                    style={[
                      styles.tcardbottom,
                      commonStyle.flexrowcenterbetween,
                    ]}
                  >
                    <YText color={theme.orange} size={theme.f28} bold>
                      66
                    </YText>
                    <Ionicons name="documents-outline" />
                  </View>
                </View>
              </View>
            </View>
            <View>
              <View style={[styles.dkbox, commonStyle.mt30]}>
                <View
                  style={[commonStyle.flexrowaligncenter, commonStyle.mb30]}
                >
                  <YText color={theme.mainText} size={theme.f28} bold>
                    打卡清单
                  </YText>
                  <YText
                    style={{ marginLeft: p(10) }}
                    color={theme.lightText}
                    size={theme.f20}
                  >
                    (仅展示最近新建的三个)
                  </YText>
                </View>

                <View
                  style={[
                    styles.dkitem,
                    {
                      backgroundColor: theme.itembg,
                    },
                  ]}
                >
                  <View style={commonStyle.flexrow}>
                    {/* checkbox */}
                    <Ionicons
                      style={{ marginRight: p(20) }}
                      name="square-outline"
                      color={theme.mainText}
                      size={20}
                    />
                    <View style={{ flex: 1 }}>
                      <View style={commonStyle.flexrowcenterbetween}>
                        <View>
                          <YText color={theme.mainText} size={theme.f28}>
                            一起养只猫
                          </YText>
                          <YText
                            style={commonStyle.mt10}
                            color={theme.secondText}
                            size={theme.f24}
                          >
                            备注：什么都可以，但是不是傻猫
                          </YText>
                        </View>
                        <Image
                          source={require("assets/boy.png")}
                          style={styles.dkface}
                        />
                      </View>
                      <View
                        style={[
                          commonStyle.flexrowcenterbetween,
                          commonStyle.mt20,
                        ]}
                      >
                        <YText color={theme.lightText} size={theme.f20}>
                          创建于2014年11月20日
                        </YText>
                        <Ionicons
                          name="ellipsis-horizontal"
                          color={theme.mainText}
                          size={20}
                        />
                      </View>
                    </View>
                  </View>
                </View>

                <View>
                  <YButton
                    style={{ width: "100%", paddingVertical: p(20) }}
                    title="查看更多"
                    titleStyle={{ fontSize: p(30), color: "white" }}
                  >
                    <YText  color={theme.btnColor} size={theme.f26}>这是按钮</YText>
                  </YButton>
                </View>
              </View>

              <View style={[styles.dkbox, commonStyle.mt30]}>
                <View
                  style={[commonStyle.flexrowaligncenter, commonStyle.mb30]}
                >
                  <YText color={theme.mainText} size={theme.f28} bold>
                    已完成
                  </YText>
                  <YText
                    style={{ marginLeft: p(10) }}
                    color={theme.lightText}
                    size={theme.f20}
                  >
                    (仅展示最近新建的三个)
                  </YText>
                </View>

                <View
                  style={[
                    styles.finishitem,
                    {
                      backgroundColor: theme.itembg,
                    },
                  ]}
                >
                  <View style={[commonStyle.flexrowcenterbetween]}>
                    <View style={[commonStyle.flexrowaligncenter]}>
                      <Ionicons
                        name="checkmark-circle"
                        size={22}
                        color={theme.secondary}
                        style={{ marginRight: p(10) }}
                      />
                      <YText color={theme.secondText} size={theme.f22}>
                        2022年12月10日
                      </YText>
                    </View>
                    <View style={[commonStyle.flexrowaligncenter]}>
                      <Image
                        source={require("assets/boy.png")}
                        style={styles.dkface}
                      />
                      <Image
                        source={require("assets/girl.png")}
                        style={styles.dkface}
                      />
                    </View>
                  </View>

                  <View style={[styles.finishcontent]}>
                    <YText
                      style={{
                        marginTop: p(10),
                      }}
                      color={theme.mainText}
                      size={theme.f26}
                    >
                      这是内容区
                    </YText>
                    <View
                      style={[
                        commonStyle.flexrowcenterbetween,
                        commonStyle.mt20,
                      ]}
                    >
                      <YText color={theme.lightText} size={theme.f20}>
                        创建于2014年11月20日
                      </YText>
                      <Ionicons
                        name="ellipsis-horizontal"
                        color={theme.mainText}
                        size={18}
                      />
                    </View>
                  </View>
                </View>

                <View
                  style={[
                    styles.finishitem,
                    {
                      backgroundColor: theme.itembg,
                    },
                  ]}
                >
                  <View style={[commonStyle.flexrowcenterbetween]}>
                    <View style={[commonStyle.flexrowaligncenter]}>
                      <Ionicons
                        name="checkmark-circle"
                        size={22}
                        color={theme.secondary}
                        style={{ marginRight: p(10) }}
                      />
                      <YText color={theme.secondText} size={theme.f22}>
                        2022年12月10日
                      </YText>
                    </View>
                    <View style={[commonStyle.flexrowaligncenter]}>
                      <Image
                        source={require("assets/boy.png")}
                        style={styles.dkface}
                      />
                      <Image
                        source={require("assets/girl.png")}
                        style={styles.dkface}
                      />
                    </View>
                  </View>

                  <View style={[styles.finishcontent]}>
                    <YText
                      style={{
                        marginTop: p(10),
                      }}
                      color={theme.mainText}
                      size={theme.f26}
                    >
                      这是内容区
                    </YText>
                    <View
                      style={[
                        commonStyle.flexrowcenterbetween,
                        commonStyle.mt20,
                      ]}
                    >
                      <YText color={theme.lightText} size={theme.f20}>
                        创建于2014年11月20日
                      </YText>
                      <Ionicons
                        name="ellipsis-horizontal"
                        color={theme.mainText}
                        size={18}
                      />
                    </View>
                  </View>
                </View>

                <View>
                  <YButton
                    style={{ width: "100%", paddingVertical: p(20) }}
                    title="查看更多"
                    titleStyle={{ fontSize: p(30), color: "white" }}
                  >
                    <YText  color={theme.btnColor} size={theme.f26}>这是按钮</YText>
                  </YButton>
                </View>
              </View>
            </View>
          </SafeAreaView>
        </LinearGradient>
      </ScrollView>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  page: {
    flex: 1,
  },
  dkbox: {},
  pagearea: {
    flex: 1,
    padding: p(30),
    paddingBottom:p(150)
  },
  dkitem: {
    paddingHorizontal: p(30),
    paddingVertical: p(30),
    borderRadius: p(25),
    // marginHorizontal: p(20),
    marginBottom: p(30),
    shadowColor: "#ffffff",
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.1,
    shadowRadius: p(8),
    elevation: p(8),
  },
  tcarditem: {
    paddingHorizontal: p(30),
    paddingVertical: p(20),
    borderRadius: p(25),
    marginHorizontal: p(20),
    marginTop: p(40),
    shadowColor: "#ffffff",
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.1,
    shadowRadius: p(5),
    elevation: p(5),
    width: p(180),
  },
  tcardbottom: {
    marginTop: p(10),
  },
  dkface: {
    width: p(50),
    height: p(50),
    borderRadius: p(25),
  },
  finishitem: {
    paddingHorizontal: p(30),
    paddingVertical: p(30),
    borderRadius: p(25),
    // marginHorizontal: p(20),
    marginBottom: p(30),
    shadowColor: "#ffffff",
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.1,
    shadowRadius: p(8),
    elevation: p(8),
  },
  finishcontent: {
    paddingLeft: p(60),
  },
});

export default observer(Together);
